// import { Dropdown, message, Space } from 'antd';
import AnnouncementsCard from "@/components/announcements-card";
import { getAnnouncementList } from "@/services/announcement";
import { Select } from "antd";
import { useEffect, useState } from "react";
import { Announcement } from "../../pages/home/home-announcements/types";
import "./index.less";

export default function Announcements() {
  const items = [
    {
      value: "desc",
      label: "New to Old",
    },
    {
      value: "asc",
      label: "Old to New ",
    },
  ];

  // const announcementsData = [
  //   {
  //     icon: weather,
  //     time: DateConverter.strToDate("2024-8-26 00:00:00"),
  //     title: " Enjoy Discounted Parking All July Long",
  //     content:
  //       "Whether you need to park for a full month or just a week, you can take advantage of these reduced prices. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. Whether you need to park for a full month or just a week, you can take advantage of these reduced prices. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together. It's our way of showing appreciation for your continued support as we navigate the busy summer season together.",
  //   },
  //   {
  //     icon: annoucement,
  //     time: DateConverter.strToDate("2024-8-25 00:00:00"),
  //     title: "Announcement 1",
  //     content: "Content for announcement 1",
  //   },
  //   {
  //     icon: discount,
  //     time: DateConverter.strToDate("2024-8-27 00:00:00"),
  //     title: "Announcement 2",
  //     content: "Content for announcement 2",
  //   },
  //   {
  //     icon: weather,
  //     time: DateConverter.strToDate("2024-8-23 00:00:00"),
  //     title: "Announcement 3",
  //     content: "Content for announcement 3",
  //   },
  //   {
  //     icon: annoucement,
  //     time: DateConverter.strToDate("2024-8-28 00:00:00"),
  //     title: "Announcement 4",
  //     content: "Content for announcement 4",
  //   },
  // ];
  const [announcementsData, setAnnouncementsData] = useState<Announcement[]>(
    []
  );
  useEffect(() => {
    getAnnouncementList({
      startDate: "2024-08-19",
      status: "ACTIVE",
      endDate: "2028-12-18",
      userType: "type3",
    })
      .then((data) => {
        console.log(data, "getAnnouncementList");
        //@ts-ignore
        setAnnouncementsData(data.data || []);
      })
      .catch((error) => {
        console.error(error, "error");
      });
  }, []);

  const onChange = (value: string) => {
    console.log(`selected ${value}`);
    // 创建原数组的浅拷贝，避免直接修改状态数组
    const sortedData = [...announcementsData].sort((a: any, b: any) => {
      if (value === "desc") {
        // 按新到旧排序（降序）
        return (
          new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
        );
      } else {
        // 按旧到新排序（升序）
        return (
          new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
        );
      }
    });
    // 用新数组更新状态（引用不同触发重新渲染）
    setAnnouncementsData(sortedData);
    console.log("sortedData:", sortedData);
  };

  const onSearch = (value: string) => {
    console.log("search:", value);
  };

  return (
    <div className="announcements">
      <div className="title-content">
        <div className="title">Announcements</div>
        <Select
          showSearch
          placeholder="Select a Type"
          optionFilterProp="children"
          onChange={onChange}
          onSearch={onSearch}
          filterOption={(input, option) =>
            (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
          }
          options={items}
        />
      </div>

      <AnnouncementsCard announcements={announcementsData} />
    </div>
  );
}
